/*
 * @Author: hy 
 * @Date: 2018-05-28 11:10:55 
 * @Last Modified by: hy
 * @Last Modified time: 2018-07-23 17:22:29
 */
<template>
    <div class="mapCon">
      <div class="mapCenter"   id="map"></div>
    </div>
</template>
<script>
import echarts from "echarts";
import _ from "lodash";
require("echarts/map/js/china.js");
import chart from "@/components/Charts/chart";
const carPath =
  "image://";
  // "path://M1705.06,1318.313v-89.254l-319.9-221.799l0.073-208.063c0.521-84.662-26.629-121.796-63.961-121.491c-37.332-0.305-64.482,36.829-63.961,121.491l0.073,208.063l-319.9,221.799v89.254l330.343-157.288l12.238,241.308l-134.449,92.931l0.531,42.034l175.125-42.917l175.125,42.917l0.531-42.034l-134.449-92.931l12.238-241.308L1705.06,1318.313z";
export default {
  name: "index",
  components: { chart },
  props: {
    value: {
      type: Array,
      default: () => {
        return {};
      }
    }
  },
  watch: {
    value(newValue, oldValue) {
      this.fetchMap(newValue);
    }
  },
  mounted() {
    // this.fetchMap();
  },
  data() {
    return {
      mapOption: {}, // 地图option
      linesData: [], // 线路坐标
      cityArr: [], // 地点坐标
      areaDatas: [] // 区域的坐标
    };
  },
  methods: {
    unique(arr) {
      var res = [arr[0]];
      for (var i = 1; i < arr.length; i++) {
        var repeat = false;
        for (var j = 0; j < res.length; j++) {
          if (arr[i].name === res[j].name) {
            repeat = true;
            break;
          }
        }
        if (!repeat) {
          res.push(arr[i]);
        }
      }
      return res;
    },
    fetchMap(res) {
      var allData = {
        citys: [],
        moveLines: [],
        mapData: []
      };
      res.forEach(item => {
        // 出发地  目的地
        if (item.departure !== item.freightReceive) {
          var moveItem = {
            fromName: item.departure,
            toName: item.freightReceive,
            coords: [
              [item.departureLng, item.departureLat],
              [item.freightReceiveLng, item.freightReceiveLat]
            ]
          };
          allData.moveLines.push(moveItem);
          var cityItem = {
            name: item.freightReceive,
            value: [item.freightReceiveLng, item.freightReceiveLat, 4],
            symbolSize: 20,
            itemStyle: {
              normal: {
                color: "#02D081"
              }
            }
          };
          allData.citys.push(cityItem);
          var mapItem = {
            name: item.freightReceive,
            value: [item.freightReceiveLng, item.freightReceiveLat, 4],
          };
          allData.mapData.push(mapItem)
        }
      });
      var reArr = this.unique(allData.citys);
      var mapArr = this.unique(allData.mapData)
      allData.citys = reArr
      allData.mapData = mapArr
      var option = {
        tooltip: {
          trigger: "item",
          axisPointer: {
            type: "shadow",
            shadowStyle: {
              width: 0,
              color: "transparent"
            }
          },
          backgroundColor: "transparent",
          extraCssText: "text-align:left,background-color:transparent",
          formatter: function(params, util) {
            var toolFirst =
              "<div style='position:relative;left:0'><img src=" +
              " style='width:313px;height:132px'>";
            var toolEnd = "</img></div>";
            var toolTiphtml =
              "<div style='position:absolute;left:140px;top:20px;color:#01f5ff'>";
            return toolFirst + toolTiphtml + "</div>" + toolEnd;
          }
        },
        geo: {
          show: true,
          map: "china",
          label: {
            normal: {
              show: false
            },
            emphasis: {
              show: false
            }
          },
          roam: true,
          itemStyle: {
            normal: {
              borderWidth: 0,
              borderColor: "#262F40",
              shadowColor: "black",
              shadowBlur: 150
            }
          }
        },
        series: [
          {
            name: "飞机后面",
            type: "lines",
            coordinateSystem: "geo",
            zlevel: 1,
            large: true,
            label: {
              normal: {
                show: false
              },
              emphasis: {
                show: false
              }
            },
            effect: {
              show: true,
              period: 20,
              trailLength: 0.9,
              color: "#02D081",
              symbolSize: 3
            },
            lineStyle: {
              normal: {
                color: "#02D081",
                width: 0,
                curveness: 0.3
              }
            },
            data: allData.moveLines
          },
          {
            name: "飞机",
            type: "lines",
            coordinateSystem: "geo",
            zlevel: 2,
            large: true,
            effect: {
              show: true,
              period: 20,
              trailLength: 0,
              // symbol: carPath,
              // symbolSize: [20, 30],
              symbolRotate: 5
            },
            lineStyle: {
              normal: {
                width: 0,
                color: "#02D081",
                opacity: 0.4,
                curveness: 0.3
              }
            },
            data: allData.moveLines
          },
          {
            type: "map",
            map: "china",
            aspectScale: 0.75, // 长宽比
            showLegendSymbol: false, // 存在legend时显示
            label: {
              normal: {
                show: true,
                color: "#02D081"
              },
              emphasis: {
                show: false,
                textStyle: {
                  color: "#fff"
                }
              }
            },
            itemStyle: {
              normal: {
                areaColor: "#002C37",
                borderColor: "#017F3D"
              },
              emphasis: {
                areaColor: "#f0bd26"
              }
            },
            data: allData.mapData
          },
          // {
          //   name: "点",
          //   type: "effectScatter",
          //   coordinateSystem: "geo",
          //   data: allData.citys,
          //   symbolSize: function(val) {
          //     return 0;
          //   },
          //   showEffectOn: "render",
          //   rippleEffect: {
          //     brushType: "stroke"
          //   },
          //   hoverAnimation: true,
          //   label: {
          //     normal: {
          //       formatter: "{b}",
          //       position: ["100%", "100%"],
          //       show: true
          //     }
          //   },
          //   itemStyle: {
          //     normal: {
          //       color: "#1D2635",
          //       shadowBlur: 10,
          //       shadowColor: "#1D2635"
          //     }
          //   },
          //   zlevel: 1
          // }
        ]
      };
      var self = this;
      if (this.mapChart) {
        this.mapChart.clear();
        this.mapChart.dispose();
      }
      self.mapChart = echarts.init(document.getElementById("map"));
      self.mapChart.setOption(option);
    }
  }
};
</script>
<style scoped>
.mapCon {
  position: absolute;
  margin: auto;
  left: 0;
  bottom: 60px;
  right: 0;
}
.mapCenter {
  min-width: 1000px;
  min-height: 880px;
}
</style>
